<template>
  <!-- 验收新增 -->
  <div>
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >供应链管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkmanagement' }"
          >验收管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkManagement/materialRentManage/list' }"
          >物资租赁验收管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkManagement/materialRentManage/list' }"
          >验收维护</el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span>新增</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- tab切换 -->
    <div class="ccui-app-container-detail2">
      <div class="center-information ccui-app-container-detail-body">
        <el-tabs v-model="activeName" class="el-tabs__customize">
          <el-tab-pane label="基本信息" name="first">
            <!-- 基本信息 -->
            <base-info ref="baseInfo" :fromData="acceptanceCertBO" />
          </el-tab-pane>
          <el-tab-pane label="采购清单" name="second">
            <!-- 采购清单 -->
            <inventory
              ref="inventory"
              :listData="acceptanceBillBOList"
              @getInventory="getInventory"
            />
          </el-tab-pane>
          <el-tab-pane label="附件信息" name="third">
            <!-- 附件信息 -->
            <update
              ref="update"
              :fileList="fileList"
              @fujian="getFujian"
              @yanshou="getYanshou"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer">
      <el-bottom-guide v-if="$route.query.status !== '查看'">
        <ul class="ccui-bottom-button">
          <li>
            <el-button type="bottom" icon="icon-ccui-save" @click="save(0)"
              >保存并校验
            </el-button>
          </li>
          <li>
            <el-button type="bottom" icon="icon-ccui-save" @click="save(1)"
              >保存并提交
            </el-button>
          </li>
          <li>
            <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
              >返回
            </el-button>
          </li>
        </ul>
      </el-bottom-guide>
      <!--  底部导航栏及签名导出  -->
      <bottomGuide
        v-if="$route.query.status === '查看'"
        busiType="102"
        approvalStatus="approvaled"
        exportMethod="get"
        methodGetPageType="exportAcceptanceOrder"
        :curPageId="$route.query.id"
        :businessCode="businessCode"
        @handleBack="handleBack"
      />
    </div>
  </div>
</template>

<script>
import baseInfo from "../common/components/baseInfo.vue";
import inventory from "../common/components/inventory.vue";
import update from "../common/components/update.vue";
import publicComponent from "@/basa/components/public";
import { saveAcceptanceCert } from "../common/api/index";

export default {
  data() {
    return {
      activeName: "first",
      businessCode: "",
      acceptanceCertBO: {},
      acceptanceBillBOList: [],
      fileList: [],
      otherUploadIds: [],
      acceptanceUploadIds: [],
      qingdanList: []
    };
  },
  components: {
    baseInfo,
    inventory,
    update,
    bottomGuide: publicComponent.bottomGuide
  },
  activated() {
    this.activeName = "first";
  },

  deactivated() {
    this.$refs.baseInfo.ruleForm = {
      brandStar: 5,
      appearanceStar: 5,
      numberStar: 5,
      logisticsEvaluationStar: 5,
      logisticsCoordinationStar: 5
    };
    this.$refs.inventory.tableData = [];
    this.$refs.update.tableData = [];
  },
  methods: {
    // 返回
    handleBack() {
      this.$router.push({ path: "/checkManagement/materialRentManage/list" });
    },
    getYanshou(val) {
      this.acceptanceUploadIds = val;
    },
    getFujian(val) {
      this.otherUploadIds = val;
    },
    getInventory(val) {
      this.qingdanList = val;
    },
    // 保存或提交
    async save(type) {
      let baseInfo, inventory, update;
      try {
        baseInfo = await this.$refs.baseInfo.positionFrom();
        inventory = await this.$refs.inventory.positionFrom();
        update = await this.$refs.update.positionFrom();
      } catch (error) {
        this.activeName = error.isFocus;
        const errorDom = document.body.querySelector(".is-error");
        if (errorDom) {
          errorDom.scrollIntoView();
        }
      }
      if (baseInfo !== "成功") return;
      if (inventory !== "成功") return;
      if (update !== "成功") return;
      this.$refs.baseInfo.ruleForm.submitStatus = type;
      // 业务类型
      this.$refs.baseInfo.ruleForm.businessType = "3";
      const obj = {
        acceptanceCertBO: this.$refs.baseInfo.ruleForm,
        acceptanceBillBOList: this.$refs.inventory.tableData,
        otherUploadIds: this.otherUploadIds,
        acceptanceUploadIds: this.acceptanceUploadIds,
        version: this.$refs.baseInfo.ruleForm.version
      };

      saveAcceptanceCert(obj).then(res => {
        this.$message.success(res.data.message);
        this.$router.push({
          path: "/checkManagement/materialRentManage/list"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 60px;
}
</style>
